import React, { useReducer, useEffect } from 'react'
import { initState, reducer, actions } from "./shop"
// 引入api
import { reqShopList, reqShopAdd } from "../../request/api";
// 引入css样式
import "./shop.css"

export default function Shop() {
    const [state, dispatch] = useReducer(reducer, initState);
    //相当于生命周期
    useEffect(() => {
        reqShopList({ uid: JSON.parse(sessionStorage.getItem("user")).uid }).then(res => {
            if (res.data.code === 200) {
                res.data.list[1].content.forEach(item => {
                    item.flag = false
                })
                dispatch(actions.changeShopList(res.data.list))
            }
        })
    }, []);
    let changeListFlage = (flag, index) => {
        state.shopList[1].content[index].flag = flag
        dispatch(actions.changeAllFlag(state.shopList[1].content.every(item => item.flag)))
        state.price = state.shopList[1].content.reduce((he, item) => {
            if (item.flag) {
                return he + item.num * item.price
            } else {
                return he
            }
        }, 0)
        dispatch(actions.changeShopList(state.shopList))
    }
    let changeAllFlag = (flag) => {
        state.shopList[1].content.forEach(item => {
            item.flag = flag
        })
        state.price = state.shopList[1].content.reduce((he, item) => {
            if (item.flag) {
                return he + item.num * item.price
            } else {
                return he
            }
        }, 0)
        dispatch(actions.changeAllFlag(flag))
    }
    let addShop = (id, e) => {
        reqShopAdd({ uid: JSON.parse(sessionStorage.getItem("user")).uid, type: 1, goodsid: id, num: 1 }).then(res => {
            if (res.data.code === 200) {
                console.log("购物车添加成功");
                reqShopList({ uid: JSON.parse(sessionStorage.getItem("user")).uid }).then(res => {
                    if (res.data.code === 200) {
                        res.data.list[1].content.forEach(item => {
                            item.flag = false
                        })
                        dispatch(actions.changeShopList(res.data.list))
                    }
                })
            }
        })
    }
    return (
        <div className="shop">
            <div className="top">
                <h3>购物车</h3>
            </div>
            <div className="main">
                {
                    state.shopList[1] ? state.shopList[1].content.map((item, index) => (
                        <div key={item.id} className="shopBox">
                            <div className="input"><input type="checkbox" checked={item.flag} onChange={() => changeListFlage(!item.flag, index)} /></div>
                            <div className="img"><img src={item.img} alt="" /></div>
                            <div className="descript">
                                <p className="goodsname">{item.goodsname}</p>
                                <p className="price">￥{item.price}</p>
                                <p className="button">
                                    <button className="sub">-</button>
                                    <span>{item.num}</span>
                                    <button className="add" onClick={() => addShop(item.goodsid)} >+</button>
                                </p>
                                <p className="del"><button>删除</button></p>
                            </div>
                        </div>
                    )) : null
                }
            </div>
            <div className="buttom">
                <div className="input"><input type="checkbox" checked={state.allFlag} onChange={() => changeAllFlag(!state.allFlag)} />全选</div>
                <div className="zhong">
                    <p>
                        <span className="sp1">合计</span>
                        <span className="sp2">￥{state.price.toFixed(2)}</span>
                    </p>
                    <p>
                        <span className="sp3">以免运费</span>
                        <span className="sp4">已优惠￥200元</span>
                    </p>
                </div>
                <div className="button">
                    <button>结算</button>
                </div>
            </div>
        </div>
    )
}
